﻿@model IEnumerable<BLL.Model.OperatingSystem.OperatingSystemInfo>
@{
    ViewBag.Title = "操作系统列表";
}
<script type="text/javascript">
    function editEntry(rowIndex) {
        var rowData = $("#list").getRowData(rowIndex);
        var id = rowData.Id;
        $.get("/os/find/" + id, function (result) {
            $("#editDiv").html(result).dialog({
                modal: true,
                width: 400,
                title: "修改操作系统信息：" + rowData.Name,
                open: function (event) {
                    $("#editDiv").data("dialog", event.target);
                },
                beforeClose: function () {
                    $("#list").trigger("reloadGrid");
                    $("#editDiv").dialog("destroy");
                }
            });
        });
    }

    function create() {
        $.get("/os/find/", function (result) {
            $("#editDiv").html(result).dialog({
                modal: true,
                width: 400,
                title: "新增操作系统信息",
                open: function (event) {
                    $("#editDiv").data("dialog", event.target);
                },
                beforeClose: function () {
                    $("#list").trigger("reloadGrid");
                    $("#editDiv").dialog("destroy");
                }
            });
        });
    }

    function deleteEntry(rowIndex) {
        var rowData = $("#list").getRowData(rowIndex);
        var id = rowData.Id;
        var name = rowData.Name;
        if (confirm("确定要删除'" + name + "'?")) {
            var url = new Utility().getUrl("Delete", "OS");
            $.get(url, { "id": id }, function (result) {
                if (result == 'ok') {
                    $("#list").jqGrid().trigger("reloadGrid");
                    alert("删除成功！");
                }
            });
        }
    }

    $().ready(function () {
        $.ajaxSetup({ cache: false });
        $("#list").jqGrid({
            url: '/os/list',
            datatype: "json",
            colNames: ['编号', '名称', '版本', '备注', '修改', '删除'],
            colModel: [
                { name: 'Id', index: 'Id', width: 200, align: 'center', hidden: true },
                { name: 'Name', index: 'Name', width: 200, align: 'left' },
                { name: 'Version', index: 'Version', width: 50, align: 'left' },
                { name: 'Comment', index: 'Comment', width: 300, align: "left" },
                { name: 'Modify', index: 'Id', width: 80, align: "center", sortable: false },
                { name: 'Delete', index: 'Id', width: 80, align: 'center', sortable: false }
            ],
            autowidth: true,
            hidegrid: false,
            height: "auto",
            rowNum: 10,
            pager: '#pager',
            emptyrecords: "没有满足条件的记录",
            viewrecords: true,
            caption: "操作系统列表",
            multiselect: false,
            jsonReader: {
                repeatitems: false
            },
            gridComplete: function () {
                var rowIndexs = $("#list").jqGrid('getDataIDs');
                for (var i = 0; i < rowIndexs.length; i++) {
                    var rowIndex = rowIndexs[i];
                    var edit = "<a href='#' style='color:#f60' onclick='editEntry(" + rowIndex + ")'>修改</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)
                    var del = "<a href='#'  style='color:#f60' onclick='deleteEntry(" + rowIndex + ")' >删除</a>";
                    $("#list").jqGrid('setRowData', rowIndex, { Modify: edit, Delete: del });
                }
            }
        }).navGrid('#pager', { edit: false, add: false, del: false, view: false, search: false });

        $("#btnSearch").button().click(function () {
            var url = 'os/list?q=' + $("#tbName").val();
            $("#list").jqGrid('setGridParam', { url: url }).trigger("reloadGrid");
        });

        $("#btnAdd").button().click(function () {
            create();
        });
    });
</script>
<div>
    <div style="margin: 5px; text-align: left;">
        系统名称：<input type="text" class="search_input" style="width: 150px" id="tbName" />
        <input type="button" id="btnSearch" value="查  询" />
        <input type="button" id="btnAdd" value="新 增" />
    </div>
    <table id="list" width="100%">
    </table>
    <div id="pager">
    </div>
</div>
<div id="editDiv">
</div>
